<template>
  <div class="container">
    <xy-table
      ref="table"
      :columns="columns"
      :list="model.accountrechargeex"
      :param="params"
    >
      <template slot="addItem">
        <search-header :model="params" :on-search="onSearch"> </search-header>
      </template>
      <template #cards="">
        <el-row :gutter="16" class="mb-1 mt-1">
          <el-col :span="6">
            <el-card>
              <div class="row">
                <div class="col-1 icon">
                  <i class="el-icon-user mr-1"></i>
                </div>
                <div class="card-body col-1">
                  <div class="title">
                    {{ $language.local("MerchantTotal") }}
                  </div>
                  <div class="num">
                    {{ model.MerchantTotal }}
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card>
              <div class="row">
                <div class="col-1 icon">
                  <i class="iconfont icon-renminbi mr-1"></i>
                </div>
                <div class="card-body col-1">
                  <div class="title">
                    {{ $language.local("RechargeAmountTotal") }}
                  </div>
                  <div class="num">
                    {{ model.RechargeAmountTotal }}
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card>
              <div class="row">
                <div class="col-1 icon">
                  <i class="iconfont icon-weixinzhifu1 mr-1 green"></i>
                </div>
                <div class="card-body col-1">
                  <div class="title">
                    {{ $language.local("PayAmountTotal") }}
                  </div>
                  <div class="num">
                    {{ model.PayAmountTotal }}
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card>
              <div class="row">
                <div class="col-1 icon">
                  <i class="iconfont icon-yue mr-1"></i>
                </div>
                <div class="card-body col-1">
                  <div class="title">
                    {{ $language.local("ServiceAmountTotal") }}
                  </div>
                  <div class="num">
                    {{ model.ServiceAmountTotal }}
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </template>
      <template #operation="">
        <span></span>
      </template>
    </xy-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      columns: {
        PayingAccountName: "15116228315",
        ServiceProviderName: "湖南易捷云科技有限公司",
        RechargeAmount: 10000,
        Note: "费用说明",
        RechargeStatus: 3,

        // RechargeStatusName: "已复核",
        // ServiceName: "湖南易捷云科技有限公司",
        // ServiceBank: "中国银行郴州中山北街支行",
        // ServiceAccountNo: "604176078734",
        // SPID: 346,
        // Id: 321,
        // ServiceBankId: 2,
        // BusinessOrderNo: "",
        // refundStatus: 0,
        // refundLockStatus: 0,
        // RecordType: "",
        // CustomerNumber: "",
        // CustomerName: "长沙XX公司",
        // AgentName: "",
        // PayingBankName: "",
        // customerReceiptUrl: "",
        // SalesOf: "",
        // ServiceProviderID: 7,
        // AddUser: "",
        // CheckUser: "",
        // CheckDate: "2021-06-04T13:47:35.753",
        // PayChannelId: 18,
        // RechargeTime: "2021-06-04T00:00:00",
        // BankSerialNumber: "",
        // PayingBank: "中国工商银行",
        // PayingAccount: "123",
        // RechargeRate: 6,
        // AccountAmount: 9433.96,
        // AccountingTime: "",
        // ruleType: "B",
        // Indate: "2021-06-04T13:46:56",
        // MID: 165,
      },
      model: "",
      params: {
        SID: "",
        MID: "",
        RechargeStatus: "",
      },
    };
  },
  created() {
    this.getData();
  },
  methods: {
    async getData(query) {
      let response = await this.$http.get("/api/statistics/charge", query);
      console.log(response);
      this.model = response.data.Data;
    },
    onSearch(e) {
      // this.params = e;
      console.log(e);
      console.log(this.$refs.table);
      this.getData(e);
    },
  },
};
</script>

<style lang="less" scoped>
.el-card {
  .row {
    display: flex;
    justify-content: space-between;
    .icon {
      display: flex;
      justify-content: center;
      i {
        font-size: 3rem;
      }
      .iconfont {
        &.green {
          color: green !important;
        }
      }
    }
    .card-body {
      .title {
        color: gray;
        font-size: 12px;
      }
      .num {
        margin-top: 1ex;
        font-size: 1.2rem;
      }
    }
  }
}
</style>
